<template>
  <div>
    <van-sticky>
      <div class="demo-nav" style>
        <div class="demo-nav__title">施工攻略</div>
        <span @click="shop()" class="demo-nav__back">
          <svg viewBox="0 0 1000 1000" @click="toBack">
            <path fill="#969799" fill-rule="evenodd" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z">
            </path>
          </svg>
        </span>
      </div>
    </van-sticky>

    <van-tabs v-model="active" animated>
      <van-tab title-style="font-weight:bold;font-size: 15px"  title="视频专区" name="a">
        <strategy-pic></strategy-pic>
      </van-tab>
      <van-tab title-style="font-weight:bold;font-size: 15px"  title="图文专区" name="b">
        <strategy-case></strategy-case>
      </van-tab>
      <van-tab title-style="font-weight:bold;font-size: 15px" title="3D设计" name="c">
        <strategy-sand></strategy-sand>
      </van-tab>


    </van-tabs>

  </div>
</template>

<script>
  import strategySand from './strategy_sand'
  import strategyPic from './strategy_pic'
  import strategyCase from './strategy_case'
  export default {
      name: "strategy_index",
    data(){
      return {
        active:a,
        activeb:b,
        activec:c,
      }
    },
    created() {
      this.updateType();
    },
    mounted() {

    },
    components: {
      strategySand,strategyPic,strategyCase
    },
    methods: {
  updateType(){
    let type = this.$route.query.type
    console.log("type**********"+type)
    //判断type的值 更改active的值
    if (type === 'a'){
      this.active = 'a'
    }else if(type === 'b'){
      this.active = 'b'
    }else if (type === 'c'){
      this.active = 'c'
    }
  },
      toBack(){
        // this.$router.go(-1);//返回上一层
        this.$router.push({
          path:"/"
          });

      },
    }

  }
</script>

<style scoped>
  .gallery_drawing{
    width: 45%;
    display: inline-block;
  }
  .gallery-van-tab-a{
    padding: 0.5rem;
    display: inline-block;
  }
  .gallery-van-tab-aa{
    padding: 0.5rem;
    width: 45%;
    display: inline-block;
  }
  .gallery-van-tab-b-contents{
    position: relative;
  }
  .van-tab-b-contents{
    display :inline-block;
    position: relative;
  }
  .block-content-p p{
    padding: 0.4rem;
  }

  .demo-nav{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 3.2rem;
    background-color: #fff;
  }
  .demo-nav__title {
    font-weight: 450;
    font-size: 1rem;
    text-transform: capitalize;
  }
  .demo-nav__back {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }

</style>
